<template>
  <!-- 角色列表 -->
  <!-- 搜索区域 -->
  <el-card class="box_card_search">
    <div class="search_header">
      <div class="search_icon">
        <el-icon><Search /></el-icon><span>筛选搜索</span>
      </div>
      <div class="search_btn">
        <el-button @click="resetIpt">重置</el-button>
        <el-button type="primary" @click="changeIpt">查询搜索</el-button>
      </div>
    </div>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="账号/姓名：">
        <el-input v-model="searchForm.keyword" placeholder="请输入账号、姓名" />
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 新增 -->
  <el-card class="box_card_add">
    <div class="add_btn">
      <div class="add_icon">
        <el-icon><Tickets /></el-icon><span>数据列表</span>
      </div>
      <el-button type="primary">添加</el-button>
    </div>
  </el-card>
  <!-- 表格 -->
  <el-table :data="list" border size="small" table-layout="auto">
    <el-table-column prop="id" label="编号" align="center" />
    <el-table-column prop="name" label="角色名称" align="center" />
    <el-table-column prop="description" label="描述" align="center" />
    <el-table-column prop="adminCount" label="用户数" align="center" />
    <el-table-column label="添加时间" align="center" min-width="100">
      <template #default="scope">{{ newDate(scope.row.createTime) }}</template>
    </el-table-column>
    <!-- 0->禁用；1->启用 -->
    <el-table-column label="是否启用" align="center">
      <!-- 开关 -->
      <template #default="{ row }"><el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="updateStatus(row.id, row.status)" /></template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary" size="small">分配菜单</el-button>
        <el-button link type="primary" size="small">分配资源</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    background
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { role } from '@/request/api'
import { useTable } from '@/hooks/component/useTable'
import { Search, Tickets } from '@element-plus/icons-vue'
import { reactive } from 'vue'

// 搜索框
const searchForm = reactive<IRoleListParams>({
  keyword: '',
})
// 对一些组件公用的属性和方法进行封装
const { list, pageNum, pageSize, total, newDate, queryList, handleSizeChange, handleCurrentChange, updateStatus } = useTable(role.APIRoleList, searchForm, role.APIRoleUpdateStatus)
// 当前页详细数据、当前第几页、一页多少条数据、数据总数

// 查询搜索按钮
const changeIpt = () => {
  queryList()
}
// 重置
const resetIpt = () => {
  searchForm.keyword = ''
  queryList()
}
</script>

<style lang="less" scoped>
// 搜索区域
.box_card_search {
  font-size: 14px;
  .search_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search_icon {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    .search_btn {
      display: flex;
      align-items: center;
      button {
        margin-left: 20px;
        padding: 9px 15px;
        font-size: 12px;
      }
    }
  }
  .el-form {
    padding: 20px 40px 0;
  }
}
// 新增
.box_card_add {
  margin: 20px 0;
  font-size: 14px;
  .add_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add_icon {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    button {
      margin-left: 20px;
      padding: 9px 15px;
      font-size: 12px;
    }
  }
}
// 分页器
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
